<template>
  <div class="app-container">
    <aside>
      The guide page is useful for some people who entered the project for the first time. You can briefly introduce the
      features of the project. Demo is based on
      <a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a>
    </aside>
    <el-button :icon="QuestionFilled" type="primary" @click.prevent.stop="guide">
      Show Guide
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'Guide'
}
</script>
<script setup>
import { QuestionFilled } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'

import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import steps from './setps'

let driver = ref(null)

onMounted(() => {
  driver = new Driver()
})

const guide = () => {
  driver.defineSteps(steps)
  driver.start()
}

</script>

<style scoped>

</style>
